<template>
	<div>
		<div v-transfer-dom>
			<popup v-model="isPopupShow" position="right" @on-hide="handleHide">
				<div class="popupDiv" style="width: 7.5rem;">
					<div class="main" ref='remove'>
						<div class="univSearchWrap">
							<div class="univSearBox">
								<div class="header">
									<span @click="goback">
										<img class="imgIcon" src="~/static/images/top_icon_back.png" alt="">
									</span>
								</div>
								<div class="searchLine flex-h">
									<img class="imgIcon" src="~/static/images/search_icon_search.png" alt="">
									<div class="flex1">
										<search :auto-fixed='false' @result-click="resultClick" :results="results" v-model="value" position="absolute"
										 auto-scroll-to-top top="0.88rem" @on-submit="onSubmit" :placeholder="placeholderText" ref="search"></search>
									</div>
									<div class="clears"  @click="clears">
										
									</div>
								</div>
							</div>
							<scroller ref='scrollerBottom' style="top: 1.76rem;">
								<div class="scrollerDiv">
									<div class="describe">共{{ commonList.length }}个专业类、{{ getResultLength() }}个专业</div>
									<ul class="scrollerCheckList">
                    <li class="parentItem" v-for="(itemParent, indexParent) in commonList" :key="indexParent">
                      <div :class="['top', (openCatalogList.indexOf(itemParent.catalog_code) !== -1) ? 'isOpened' : '']" @click="isOpenCatalogList(itemParent)">
                        <div class="left">
                          <img 
                            class="imgIcon" 
                            src="~/static/images/search_icon_sure.png" 
                            @click.stop="topIconClick(itemParent, 'sure')" 
                            v-if="choCatalogList.indexOf(itemParent) !== -1" 
                          />
                          <img 
                            class="imgIcon"
                            src="~/static/images/search_icon_nor.png" 
                            @click.stop="topIconClick(itemParent, 'nor')" 
                            v-else 
                          />
                          <span>{{ itemParent.catalog_name }}</span>
                        </div>
                        <div class="right">{{ openCatalogList.indexOf(itemParent.catalog_code) == -1 ? '+' : '-' }}</div>
                      </div>
                      <ul class="majorList" v-show="openCatalogList.indexOf(itemParent.catalog_code) !== -1">
                        <li v-for="(item, index) in itemParent.majors" :key="index" @click="majorChoClick(item, itemParent)">
                          <img class="imgIcon" src="~/static/images/search_icon_sure.png" v-if="checklist.indexOf(item) !== -1" />
                          <img class="imgIcon" src="~/static/images/search_icon_nor.png" v-else />
                          <span>{{ item.major_name }}</span>
                        </li>
                      </ul>
                    </li>
									</ul>
									<div style="width: 100%;height: 92px;"></div>
								</div>
								<div style="width: 100%;height: 92px;"></div>
							</scroller>

							<div class="footer">
								<div class="left">
									<span class="hasChoose">已选择</span>
									<span class="selectedNum">{{ checklist.length }}</span>
									<span class="totalNum">/{{ getResultLength() }}</span>
								</div>
								<div class="right" @click="submit">确定</div>
							</div>
						</div>

					</div>
				</div>
			</popup>
		</div>
	</div>
</template>

<script>
	import {
		TransferDom,
		Popup,
		Search
	} from 'vux'
	import {
		format
	} from '~/plugins/filter';
	import { getmajorall } from "~/api/repository";

	import ls from 'store2';
	export default {
		props: {
			popupShow: Boolean,
			placeholderText: String,
			status: String,
			divis: String,
		},
		directives: {
			TransferDom
		},
		components: {
			Popup,
			Search,
		},
		data() {
			return {
				isPopupShow: false,
				searchs: '',
				results: [],
				value: '',
        commonList: [],
        totalList: [],
        checklist: [],
        choCatalogList: [], // 已选专业大类集合
				openCatalogList: [], // 展开下级列表的专业大类集合
				isWenLi: "",
			};
		},
		watch: {
			// 根据传入的popupShow这个值来判断popup是否显示
			popupShow(type) {
        this.isPopupShow = type;
				this.checklist = [];
				this.commonList = this.totalList;
        this.choCatalogList = [];
        this.openCatalogList = [];
				this.value = '';
        // this.getResultLength(this.commonList);
			},
			searchs(e) {
				console.log(e)
			},
		},
		mounted() {
			console.log('divis', this.divis)
			if (this.divis == '理科') {
					this.isWenLi = 1;
				} else if(this.divis == '文科'){
					this.isWenLi = 2;
				}
      this.getAllMajorLists();
		},
		methods: {
      // 点击'专业大类'前勾选按钮时触发的事件
      topIconClick(item, type) {
        if (type == "sure") {
          this.choCatalogList = this.choCatalogList.filter(x => x !== item);
          this.openCatalogList = this.openCatalogList.filter(x => x !== item.catalog_code);

          for (const major of item.majors) {
            this.checklist = this.checklist.filter(x => x !== major);
          }

        } else {
          this.choCatalogList.push(item);
          this.openCatalogList.push(item.catalog_code);

          for (const catalog of this.choCatalogList) {
            for (const major of catalog.majors) {
              if (this.checklist.indexOf(major) == -1) {
                this.checklist.push(major);
              }
            }
          }
        }
      },
      // 点击是否展开下级列表的专业大类
      isOpenCatalogList(item) {
        if (this.openCatalogList.indexOf(item.catalog_code) == -1) {
          this.openCatalogList.push(item.catalog_code);
        } else {
          this.openCatalogList = this.openCatalogList.filter(x => x !== item.catalog_code);
        }
      },
      // 点击某一专业
      majorChoClick(item, parentItem) {
        if (this.checklist.indexOf(item) == -1) {
          this.checklist.push(item);
          let isAllCho = true;
          // 将当前专业大类的每个元素与checklist集合中的元素进行比较
          // 当大类中的每个元素都在checklist集合中时让大类也勾选上
          for (const major of parentItem.majors) {
            if (this.checklist.indexOf(major) == -1) {
              isAllCho = false;
            }
          }
          if (isAllCho) this.choCatalogList.push(parentItem);

        } else {
          this.checklist = this.checklist.filter(x => x !== item);

          if (this.choCatalogList.indexOf(parentItem) !== -1) {
            this.choCatalogList = this.choCatalogList.filter(x => x !== parentItem);
          }
        }
      },

      getAllMajorLists() {
        getmajorall({ 
          level: 1,
          depth: 2,
					format: 2,
					wenli: this.isWenLi,
        }).then(res => {
          if (res.code == 200) {
            this.commonList = res.data;
            this.totalList = res.data;
            
          }
        })
      },
      // 获取list集合的数量长度
      getResultLength() {
				let resultLength = 0;
        for (const major of this.commonList) {
          resultLength += major.majors.length;
        }
        return resultLength;
      },
			getMajorData(value) {
        let arr = [];
        for (const catalog of this.totalList) {
          for (const major of catalog.majors) {
            if (major.major_name.indexOf(value) !== -1) {
              if (arr.indexOf(catalog) == -1) {
                arr.push(catalog);
              }
            }
          }
        }
        this.commonList = arr;

			},
			handleHide() {
				this.$emit('closePopUp');
			},
			goback() {
				this.$emit('closePopUp');
			},
			onSubmit() {
				this.checklist=[]
				this.$refs.search.setBlur()
        this.getMajorData(this.value)
			},

			resultClick(item) {
				console.log('item',item)
			},
			clears() {
				this.value = '';
			},
			goto(routerName, queryData) {
				this.$router.push({
					path: routerName,
					query: {
						type: queryData
					}
				});
			},
			addOrRemove(item) {
				if (this.checklist.indexOf(item) == -1) {
					this.checklist.push(item);
				} else {
					this.checklist = this.checklist.filter((x) => {
						return x !== item;
					})
				}
			},
			submit() {
        if (this.checklist.length > 20) {
          this.$vux.confirm.show({
            content: '已选专业超过20个，会导致方案准确度大幅下降，是否确认提交？',
            onCancel : () => {},
            onConfirm : () => {
              this.$emit('sendList', this.checklist);
            }
          })
        } else {
          this.$emit('sendList', this.checklist);
        }
			}
		}

	}
</script>

<style lang="less" scoped>
	.vux-popup-dialog {
		background: #fff;
	}

	.univSearchWrap {
		width: 7.5rem;
		min-height: 100vh;
		background: #fff;
		position: relative;

		.univSearBox {
			width: 7.5rem;
			padding: 0 0.3rem;
			box-sizing: border-box;
			height: auto;

			.header {
				width: 100%;
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.3rem;
				.imgIcon {
					width: 0.4rem;
					height: 0.4rem;
					
				}
			}

			.searchLine {
				width: 100%;
				height: 0.88rem;
				padding-right: 0.3rem;
				box-sizing: border-box;
				border-bottom: 1px solid rgba(238, 238, 238, 1);
				padding-left: 0.08rem;
				padding-bottom: 0.05rem;
				overflow: hidden;
				.clears {
					width: 0.6rem;
					height: 0.88rem;
					line-height: 0.88rem;
		
					// align-items: center;
					// overflow: hidden;
				}

	
				.imgIcon {
					width: 0.4rem;
					height: 0.4rem;
					margin-top: 0.24rem;
					
				}

			}

			.searchLine /deep/ .weui-search-bar {
				background-color: none;
				padding: 0;
			}

			.searchLine /deep/ .weui-search-bar:before {
				border: none;
				height: 0;
			}

			.searchLine /deep/ .weui-search-bar:after {
				border: none;
				height: 0;
			}

			.searchLine /deep/ .weui-search-bar__box {
				padding-left: 0.2rem;
				height: 0.88rem;
				// background: red;
			}
			 /deep/ .weui-search-bar__box .weui-search-bar__input{
				background:#fff !important;
			}
			/deep/.weui-search-bar__form{
				background:#fff !important;
			}
			.searchLine /deep/ .weui-search-bar__form:after {
				border: none;
				border-radius: 0;
			}

			.searchLine /deep/ .weui-search-bar.weui-search-bar_focusing .weui-search-bar__cancel-btn {
				display: none !important;
			}

			.searchLine /deep/ .weui-search-bar__box .weui-icon-clear {
				display: none !important;
			}

			.searchLine /deep/ .weui-icon-search:before,
			.searchLine /deep/ .weui-search-bar__label {
				display: none !important;
			}

			.searchLine /deep/ .weui-search-bar__label span {
				display: none;
			}

			.searchLine /deep/ .weui-search-bar__box .weui-search-bar__input {
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.34rem;
				position: absolute;
			}



		}

		.scrollerDiv {
			padding:0.3rem;
			box-sizing: border-box;
			.describe {
				font-size: 0.26rem;
				color: #BBB;
				font-weight: bold;
				// margin-top: 0.6rem;
				margin-bottom: 0.2rem;
			}

			.scrollerCheckList /deep/ .weui-cells:before {
				border: none;
				left: 0;
			}

			.scrollerCheckList {
				list-style: none;
				padding-left: 0;

				.parentItem {
          
          
          .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 0.9rem;
            line-height: 0.9rem;
            background: transparent;
            border-bottom: 1px solid #eee;
            padding-left: 0.3rem;  
            padding-right: 0.3rem;  

            .left {
              display: flex;
              align-items: center;
              span {
                font-size: 0.3rem;
                margin-left: 0.28rem;
                color: #222;
                letter-spacing: 0.03rem;
              }
  
              .imgIcon {
                width: 0.4rem;
                height: 0.4rem;
              }
            }
            .right {
              font-size: 0.3rem;
              color: #222;
            }


          }
					
          .isOpened {
            background: #f7f7fa;
          }
          
          .majorList {
            list-style: none;
            padding-left: 0.5rem;
            li {
              display: flex;
              align-items: center;
              height: 0.8rem;
              border-bottom: 1px solid #eee;
              padding-left: 0.3rem;  
              span {
                font-size: 0.24rem;
                margin-left: 0.28rem;
                color: #555;
                letter-spacing: 0.03rem;
              }
              .imgIcon {
                width: 0.35rem;
                height: 0.35rem;
              }
            }
          }

				}
			}
		}

		.footer {
			width: 100%;
			height: 1.2rem;
			position: fixed;
			bottom: 0;
			left: 0;
			background: #fff;
			box-shadow: 0px -4px 10px 0px rgba(204, 204, 204, 0.2);
			color: #ccc;
			padding: 0 0.3rem;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				.hasChoose {
					color: #222;
					font-size: 0.26rem;
					font-weight: bold;
					margin-right: 0.2rem;
				}

				.selectedNum {
					color: @mainColor;
					font-size: 0.4rem;
					margin-right: 0.07rem;
				}

				.totalNum {
					color: #BBB;
					font-size: 0.22rem;
				}
			}

			.right {
				display: inline-block;
				width: 2rem;
				height: 0.7rem;
				line-height: 0.7rem;
				text-align: center;
				border-radius: 0.1rem;
				background: @mainColor;
				color: #fff;
				font-size: 0.36rem;
			}
		}

	}
</style>
